<template>
    <div>
      <el-form ref="loginForm"
               :model="loginForm"
               class="loginForm"
               :rules="rules"
               v-loading="loading"
               element-loading-text="正在登录..."
               element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <h3>系统登录</h3>
        <el-form-item prop="username">
          <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <div style="display: flex;align-content: center">
            <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更改验证码" style="width: 250px;margin-right: 20px"></el-input>
            <img :src="captchaUrl" alt="" @click="updateCaptcha">
          </div>
        </el-form-item>


        <el-form-item>
           <el-checkbox label="记住我" v-model="checked"></el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
        </el-form-item>

      </el-form>
    </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      captchaUrl:'/captcha?time=' + new Date(),
      checked:true,
      loginForm:{
        username:"admin",
        password:"123456",
        code:'',
      },
      loading:false,
      rules:{
        username:[{required:true,message:"请输入用户名",trigger:'blur'}],
        password:[{required:true,message:"请输入密码",trigger:'blur'}],
        code:[{required:true,message:"请输入验证码",trigger:'blur'}],
      }
    }
  },
  methods:{
    updateCaptcha() {
      this.captchaUrl = '/captcha?time=' + new Date();
    },

    submitLogin() {

      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true ;
          this.postRequest("/login",this.loginForm).then(res => {
            if (res.code == 200) {
              this.loading = false;
              const tokenStr = res.data.tokenHead + " " + res.data.token;
              window.sessionStorage.setItem("token",tokenStr);
              //replace:点击浏览器的返回不会回退
              //push:可以回退
              // this.$router.replace("/home")

              // 根据用户输入路径进行登录后的页面跳转
              let path = this.$route.query.redirect;
              this.$router.replace((path ==='/' || path === undefined)?'/home':path)

            }else {
              this.loading = false;
            }
          },err => {
          })
        }else {
          this.$message.error("请输入所有字段")
        }
      })
    }
  }
}
</script>

<style scoped>
  .loginForm{
      border-radius: 15px;
      background-clip: padding-box;
      width: 350px;
      margin: 188px auto;
      padding: 15px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
  }

  .el-input__inner {
    height: 43px;
    line-height: 43px;
  }

  .el-loading-spinner svg {
    color: #409eff;
  }
</style>